<script setup lang="ts">

import routeConstants from '@renderer/routers/routeConstants'
import { convertImgArr2Map } from '@renderer/utils/commonFn'

const {
  SERVICE_BULB_PREHEAT,
  SERVICE_AIR_CORRECTION,
  SERVICE_NORMAL_QA,
  SERVICE_MANUAL_SCAN,
  SERVICE_AUTH_MANAGE,
  SERVICE_INSPECTION_REPORT,
  SERVICE_ORG_MANAGE,
  SERVICE_DICOM_MANAGE,
  SERVICE_LOG_MANAGE,
  SERVICE_DISK_MANAGE,
  SERVICE_UPDATE,
  SERVICE_REPORT,
  SERVICE_PERFORMANCE_EVALUATION,
  SERVICE_VIEWER_SETTING,
  SERVICE_HARDWARE_TEST,
  SERVICE_SYSTEM_STATISTICS,
  SERVICE_BATTERY_INFO,
  SERVICE_PROCESS_CONFIG,
  SERVICE_SYSTEM_SETTING
} = routeConstants
const imgList = import.meta.glob('@renderer/assets/imgs/service/*.*', {
  eager: true
})
const imgsMap = convertImgArr2Map(imgList)

const serviceList = [SERVICE_BULB_PREHEAT,
  SERVICE_AIR_CORRECTION,
  SERVICE_NORMAL_QA,
  SERVICE_MANUAL_SCAN,
  SERVICE_AUTH_MANAGE,
  SERVICE_INSPECTION_REPORT,
  SERVICE_ORG_MANAGE,
  SERVICE_DICOM_MANAGE,
  SERVICE_LOG_MANAGE,
  SERVICE_DISK_MANAGE,
  SERVICE_UPDATE,
  SERVICE_REPORT,
  SERVICE_PERFORMANCE_EVALUATION,
  SERVICE_VIEWER_SETTING,
  SERVICE_HARDWARE_TEST,
  SERVICE_SYSTEM_STATISTICS,
  SERVICE_BATTERY_INFO,
  SERVICE_PROCESS_CONFIG,
  SERVICE_SYSTEM_SETTING].map(eachRoute => {
  return {
    name: eachRoute.name,
    imgSrc: imgsMap.get(eachRoute.name),
    width: 70,
    to: eachRoute.path
  }
})

</script>

<template>
  <div class="w-full h-full pt-[10px] overflow-auto">
    <div class="grid grid-cols-5 gap-x-[10px] justify-center items-center">
      <template v-for="item in serviceList" :key="item.name">
        <router-link
          :to="item.to"
        >
          <div
            class="w-[180px] h-[137px] flex flex-col justify-center items-center"
          >
            <div class="w-full h-[80px] flex justify-center items-center">
              <img
                :src="item.imgSrc"
                :style="{
                      width:item.width+'px',
                }" />
            </div>
            <span class="text-xl mt-[10px]">{{ item.name }}</span>
          </div>
        </router-link>
      </template>
    </div>
  </div>
</template>

<style scoped>

</style>
